<template>
  <el-container>
    <el-header class="header">
      <h1>{{ title }}</h1>
    </el-header>
    <el-main>
      <p class="description">{{ description }}</p>
      <p class="time">{{ votingTime }}</p>
      <p class="time">{{ endTime }}</p>
      <el-button type="primary" @click="handleVote">投票</el-button>
      <el-button type="info" @click="handleRanking">排名</el-button>
    </el-main>
  </el-container>
</template>

<script>
import { defineComponent } from "vue";
import { ElContainer, ElHeader, ElMain, ElButton } from "element-plus";

export default defineComponent({
  components: {
    ElContainer,
    ElHeader,
    ElMain,
    ElButton
  },
  data() {
    return {
      title: "《前端框架应用项目开发》期末作品投票",
      description: "简介：《前端框架应用项目开发》期末作品投票，其中评审评分占50%，同学评分占50%",
      votingTime: "投票时间：2024年5月15日 00:00 结束时间：2024年5月20日 00:00",
      endTime: "结束时间：2024年5月20日 00:00"
    };
  },
  methods: {
    handleVote() {
      this.$router.push('/shitu'); // 跳转到投票页面
    },
    handleRanking() {
      this.$router.push('/liebiaotu'); // 跳转到排名页面
    }
  }
});
</script>

<style scoped>

</style>
